<script setup>
import {ref} from "vue";
import {ElNotification} from "element-plus";

let admin = ref({
  admin_ID: "",
  admin_Name: '管理员',
  user_avatar: '/src/assets/photos/logo/avatarWhite.png',
})

function exitLogin() {

}
</script>

<template>
  <div class="artNav_mod">
    <div class="logoA">
      <router-link to="/">
        <img src="/src/assets/photos/logo/AUT.png">
      </router-link>
    </div>
    <div class="infoNav_mod">
      <el-dropdown>
        <div class="avatarAName_mod" >
          <img :src=admin.user_avatar>
          <span>{{ admin.admin_Name }}</span>
          <div class="dropdown_mod_user">
          </div>
          <el-icon style="color:#FFFFFF;" class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>切换用户</el-dropdown-item>
            <el-dropdown-item divided style="color: red"
                              @click="exitLogin()">退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped>

/*导航栏离开顶部的样式*/
.artNav_mod {
  background-color: #545c64;
  backdrop-filter: blur(2px);
  opacity: 1;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s ease-in-out;
  box-shadow: 0px 5px 6px 0px #545c6473;
}


.logoA {
  margin-left: 100px;
  display: flex;
  align-items: center;
}

.optionNav_mod {
  margin-left: 100px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.optionNav_mod a {
  text-decoration: none;
}

.optionNav_mod span {
  font-family: "微软雅黑 Light", serif, serif;
  color: #b2b2b2;
  font-weight: 700;
  font-size: 17px;
}

.optionNav_mod span:hover {
  color: #c4c4c4;
}

.infoNav_mod {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 200px;
  min-width: 150px;
}

.infoNav_mod span {
  font-family: "微软雅黑 Light", serif, serif;
  font-weight: 700;
  font-size: small;
  color: #b2b2b2;
}


.avatarAName_mod {
  min-width: 80px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatarAName_mod img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin-right: 10px;
}

.signInA_mod {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 200px;
  min-width: 150px;
}

#SA_mod >>> .el-button:focus, .el-button:hover {
  border-color: #e58c43;
  background-color: #e58c43;
  outline: 0;
  transition: all 0.5s ease-in-out;
}

/*下拉菜单的样式修改*/
/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: #fff4ec;
  color: #e58c43;
}

</style>